var AUTO;
(function (AUTO) {
    var TabPanel = (function () {
        function TabPanel(element, cmd, tabInfo) {
            this._cmd = { add: this.AddTab,
                remove: this.RemoveTab,
                removeall: this.RemoveallTab };
            this.$el = $(element);
            if (_.isUndefined(cmd)) {
                this.init();
                this.bindEvent();
            }
            else {
                var me = this.$el.data("OriginData");
                me._cmd[cmd].call(me, tabInfo);
            }
        }
        TabPanel.prototype.init = function () {
            this.idList = [];
            this.seqList = [];
            this.$el.addClass(TabPanel.DefaultClassName)
                .html(TabPanel.OutDom).append(TabPanel.TabMenu);
            this.tabUL = this.$el.find("ul.nav");
            this.tabMenu = this.$el.find("div.dropdown");
            this.tabContent = this.$el.find("div.tab-content");
            this.$el.data("OriginData", this);
        };
        TabPanel.prototype.bindEvent = function () {
            var scope = this;
            this.$el.off(TabPanel.DefaultEventName);
            $(window).off(TabPanel.DefaultEventName);
            this.$el.on("click" + TabPanel.DefaultEventName, ".close", function () {
                scope.RemoveTab({ id: $(this).parent().data("id") });
            });
            $(window).on("resize" + TabPanel.DefaultEventName, function (event) {
                scope.$el.height($(window).height() - scope.$el.offset().top);
            }).trigger("resize");
            this.$el.on('show.bs.tab', 'a[data-toggle="tab"]', function (e) {
                scope.seqList.push($(this).data("id"));
            });
            this.tabUL.on("contextmenu" + TabPanel.DefaultEventName, "li", function (event) {
                var offset = $(this).position();
                scope.tabMenu.css({ "left": event.offsetX + offset.left,
                    "top": scope.tabUL.height() })
                    .find(".dropdown-menu").show();
                return false;
            });
        };
        TabPanel.prototype.AddTab = function (tabInfo) {
            var idx = this.idList.indexOf(tabInfo.id);
            if (idx >= 0) {
                this.tabUL.find("li>a").eq(idx).tab("show");
                return;
            }
            this.tabUL.append(TabPanel.TabLi(tabInfo));
            this.tabContent.append(TabPanel.TabContent(tabInfo));
            this.idList.push(tabInfo.id);
            this.tabUL.find("li>a").last().tab("show");
        };
        TabPanel.prototype.RemoveTab = function (tabInfo) {
            var idx = this.idList.indexOf(tabInfo.id);
            if (idx >= 0) {
                var $li = this.tabUL.find("li:eq(" + idx + ")");
                var isActive = $li.hasClass("active");
                $li.remove();
                this.$el.find("#" + tabInfo.id).remove();
                this.idList.splice(idx, 1);
                while (isActive && this.seqList.length > 0) {
                    var lastid = this.seqList.pop();
                    var i = this.idList.indexOf(lastid);
                    if (i >= 0) {
                        this.tabUL.find("li>a").eq(i).tab("show");
                        break;
                    }
                }
            }
        };
        TabPanel.prototype.RemoveallTab = function () {
            this.init();
        };
        TabPanel.DefaultClassName = "autotabpanel";
        TabPanel.DefaultEventName = ".autotabpanelEvent";
        TabPanel.OutDom = '<ul class="nav nav-tabs"></ul><div class="tab-content"></div>';
        TabPanel.TabLi = _.template('<li><a href="#<%=id%>" data-toggle="tab" data-id="<%=id%>"><%=title%>&nbsp;<button type="button" class="close" ><span>&times;</span></button></a></li>');
        TabPanel.TabContent = _.template('<div class="tab-pane" id="<%=id%>"><iframe allowfullscreen="" scrolling="auto" style="width:100%;height:100%;" src="<%=url%>" frameborder="0"></iframe></div>');
        TabPanel.TabMenu = "<div class=\"dropdown\">\n   <ul class=\"dropdown-menu\">\n    <li><a href=\"#\" data-close=\"me\">\u5173\u95ED</a></li>\n    <li class=\"divider\"></li>\n    <li><a href=\"#\" data-close=\"right\">\u5173\u95ED\u53F3\u4FA7\u6807\u7B7E\u9875</a></li>\n    <li><a href=\"#\" data-close=\"left\">\u5173\u95ED\u5DE6\u4FA7\u6807\u7B7E\u9875</a></li>\n    <li><a href=\"#\" data-close=\"other\">\u5173\u95ED\u5176\u5B83\u6807\u7B7E\u9875</a></li>\n  </ul>\n</div>";
        return TabPanel;
    }());
    AUTO.TabPanel = TabPanel;
})(AUTO || (AUTO = {}));
